<template>
	<view class="install-container" style="margin-bottom: 30rpx;">
	
		<!-- 用户信息 -->
		<!-- 如果需要使用 validateFunction 自定义校验规则,则不能采用 uni-forms 的 rules 属性来配置校验规则，
		这时候需要通过ref，在onReady生命周期调用组件的setRules方法绑定验证规则 -->
		<uni-forms :value="params" ref="form" validateTrigger="bind" class="word5">
			<uni-forms-item required name="delay" label="申请时长:">
				<input type="number" maxlength="18" v-model="params.delay" placeholder="请填写延期时长" @input="binddata('delay',$event.detail.value)" >
			</uni-forms-item>
			<uni-forms-item required label="时长类型:" name="unit">
				<view :class="label == '请选择时长类型' ? 'color':''" class="tap" @click="handleTap('picker')">{{label}}</view>
				<lb-picker ref="picker" @click="handleTap('picker')" @input="binddata('unit',$event)"  mode="selector" :list="delayTypeList" :dataset="{ name: 'label' }"
				 @confirm="handleConfirm" @cancel="handleCancel">
				</lb-picker>
			</uni-forms-item>
			<uni-forms-item required label="延期原因:">
				<uni-easyinput placeholder="请输入原因" type="textarea" v-model="params.reason" @input="binddata('reason',$event.detail.value)" ></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item>
				<upload :boxWidth="200" :max="3" @input='onchange' />
			</uni-forms-item>
			<button class="btn" @click="submitForm">提交</button>
		</uni-forms>

	</view>
</template>

<script>
	import upload from '@/components/upload.vue'
	import LbPicker from '@/components/lb-picker/index.vue'
	import dayjs from 'dayjs'
	export default {
		components: {
			LbPicker,
			upload
		},
		data() {
			return {
				delayTypeList: this.$type.delayTypeList,
				label: '请选择时长类型',
				params: {
					id: null,
					delay: '',
					unit: '',
					reason: '',
					attachments: []
				},
				//表单验证规则
				rules: {
					delay: {
						rules: [{
							required: true,
							errorMessage: '请填写延期时长',
						}]
					},
					unit: {
						rules: [{
							required: true,
							errorMessage: '请填写时长类型',
						}]
					},
					// reason: {
					// 	rules: [{
					// 		required: true,
					// 		errorMessage: '请填写延期原因',
					// 	}]
					// },
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			console.log(options)
			this.params.id = +options.id
		},
		methods: {
			binddata(name,value){
			   // 通过 input 事件设置表单指定 name 的值
			   this.$refs.form.setValue(name, value)
			},
			onchange(e) {
				this.params.attachments = e
			},
			handleTap(name) {
				this.$refs[name].show()
			},
			handleConfirm(e) {
				if(e) {
					const name = e.dataset.name
					const label = e.item
					console.log(e)
					this.params.unit = e.value
					// this.params.unit = e.item.id
					// this.params4.education = e.item.id
					if(name && label){
						this[name] = label
					}
				}
			},
			submitForm(form) {
				// console.log('this.resident', this.resident)
				// 手动提交表单
				this.$refs.form.submit().then(res => {
					if(this.params.reason.trim() == '') {
						uni.showToast({
							title: '请填写延期原因',
							icon: 'none'
						})
					}
					res.delay = res.delay && parseInt(res.delay)
					let params = JSON.parse(JSON.stringify(this.params))
					if(res.unit === '小时') {
						res.delay = res.delay * 60
					}else if(res.unit === '天') {
						res.delay = res.delay * 1440
					}
					// if(res.unit === '小时') {
					// 	params.delay = params.delay * 60
					// }else if(res.unit === '天') {
					// 	params.delay = params.delay * 1440
					// }
					console.log('表单数据信息：', res);
					this.delayTicket(Object.assign({}, this.params, res))
				}).catch(err => {
					console.log('表单错误信息：', err);
					uni.showToast({
						icon: 'none',
						title: "表单字段填写错误，请检查"
					})
				})
			},	
			delayTicket(params) {
				uni.showLoading({
					mask: true
				})
				this.$http2.post('ticketSystem/ticket/delay', params).then(res => {
					console.log(res)
					if(res.code === 10000){
						// uni.navigateBack({
						// 	delta: 1
						// })
						uni.redirectTo({
							url: '../acceptSuccess/acceptSuccess?path=../index/index' + '&title=返回工单首页'
						})
						// uni.showToast({
						// 	title: '申请成功'
						// })
					}else if(res.code === 50012) {
						uni.showToast({
							title: '已提交延期申请,请勿重复提交',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.install-container {
		// height: 100vh;
		background-color: #F8F8F8;
		// padding-bottom: 100rpx;
	}
	.color {
		color: #808080;
	}
	.tap {
		display: flex;
		align-items: center;
	}
	.btn {
		margin-top: 160rpx;
		width: 568rpx;
		height: 80rpx;
		// position: fixed;
		bottom: 0;
		line-height: 80rpx;
		margin-left: 80rpx;
		// margin-top: 160rpx;
		background: linear-gradient(to right, #3350D9, #1152FC);
		// background-color: #1152FC;
		color: #fff;
	}
</style>
